<template>
	<view>
		<nav-header title="群公告">
			<!-- <template v-slot:left>
				<svg-icon icon="arrowLeft" @tap="goBack"></svg-icon>
			</template> -->
			<template v-slot:right v-if="isOwner || isAdmin">
				<uni-icons type="plus" size="32" @click="goAdd"></uni-icons>
			</template>
		</nav-header>

		<view class="today" v-if="isOwner || isAdmin">
			<view>
				<text class="title">今日可发布数
					&nbsp;&nbsp;({{ group.releasedNotice }}/{{ group.maxReleaseNotice }})</text>
			</view>
			<view>
				<button class="btncolor" type="primary" size="mini" @tap.stop.native="">
					<text class="text-xs-Medium">增加次数</text>
				</button>
			</view>
		</view>

		<view class="announce">
			<view v-for="item in tList" :key="item.id" style="gap: 16rpx;" @click="goDetail(item)"
				v-if="tList.length > 0">
				<view class="header">
					<!-- <button type="primary" size="mini" class="header-button" v-if="item.isOnTop">置顶</button>
					<text>{{ item.updateTime }}</text> -->
					<view class="fc">
						<text class="text-sm-Medium">群公告</text>
						<svg-icon icon="arrowRight" :width="32" style="margin-top: 10rpx;"></svg-icon>
					</view>
					<!-- <view class="fc" v-if="!item.isOnTop">
						<svg-icon icon="dui"></svg-icon>
						<text class="text-sm-Regular" style="color: #A4A7AE;">置顶</text>
					</view> -->
					<view class="fc" v-if="isOwner || isAdmin">
						<svg-icon icon="pin" :width="32" style="margin-top: 10rpx;"></svg-icon>
						<text class="text-sm-Regular" style="color:#2970FF;">取消置顶</text>
					</view>
					<view v-else>
						<text v-if="item.isRead" class="text-sm-Regular" style="color: #2970FF;">已读</text>
						<text v-else class="text-sm-Regular" style="color: #A4A7AE;">未读</text>
					</view>
				</view>
				<!-- <view class="people">
					<text>{{ item.updateName }}</text>
					<view class="yidu" v-if="item.isRead"><uni-icons type="checkbox" size="24"
							color="#0c9eff"></uni-icons>已读
					</view>
				</view> -->
				<view class="content">
					<text class="text-sm-Regular">{{ item.content }}</text>
				</view>
				<view class="badge" v-if="isOwner || isAdmin">
					<text class="top" v-if="item.isOnTop">已置顶</text>
					<text class="fix" v-if="item.isFixedBox">固定在聊天框</text>
					<text class="dia" v-if="item.isPopNotice">弹窗显示</text>
				</view>
				<view v-else>
					<view class="fc">
						<text class="text-xs-Medium uptime">{{ item.updateTime }}</text>
						<view class="badge" style="padding: 0;padding-top: 24rpx;">
							<text class="top" v-if="item.isOnTop">已置顶</text>
						</view>
					</view>
				</view>
			</view>
			<view v-for="item in aList" :key="item.id" style="gap: 16rpx;" @click="goDetail(item)"
				v-if="aList.length > 0">
				<view class="header">
					<!-- <button type="primary" size="mini" class="header-button" v-if="item.isOnTop">置顶</button>
					<text>{{ item.updateTime }}</text> -->
					<view class="fc">
						<text class="text-sm-Medium">群公告</text>
						<svg-icon icon="arrowRight" :width="32" style="margin-top: 10rpx;"></svg-icon>
					</view>
					<view class="fc" v-if="isOwner || isAdmin">
						<svg-icon icon="upin" :width="32" style="margin-top: 10rpx;"></svg-icon>
						<text class="text-sm-Regular" style="color: #A4A7AE;">置顶</text>
					</view>
					<view v-else>
						<text v-if="item.isRead" class="text-sm-Regular" style="color: #2970FF;">已读</text>
						<text v-else class="text-sm-Regular" style="color: #A4A7AE;">未读</text>
					</view>
				</view>
				<!-- <view class="people">
					<text>{{ item.updateName }}</text>
					<view class="yidu" v-if="item.isRead"><uni-icons type="checkbox" size="24"
							color="#0c9eff"></uni-icons>已读
					</view>
				</view> -->
				<view class="content">
					<text class="text-sm-Regular">{{ item.content }}</text>
				</view>
				<view class="badge" v-if="isOwner || isAdmin">
					<text class="top" v-if="item.isOnTop">已置顶</text>
					<text class="fix" v-if="item.isFixedBox">固定在聊天框</text>
					<text class="dia" v-if="item.isPopNotice">弹窗显示</text>
				</view>
				<view v-else>
					<text class="text-xs-Medium uptime">{{ item.updateTime }}</text>
				</view>
			</view>
			<view v-if="aList.length==0&&tList.length==0" class="none">
				<!-- <text>暂无公告内容</text> -->
				<up-empty :icon="getResource('/icon/empty-message.svg')" text="暂无公告内容">
				</up-empty>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				groupId: 0,
				aList: [],
				tList: [],
				groupMembers: [],
				group: [],
				pageNum: 1,
				pageSize: 10,
				loading: false, // 是否正在加载数据
				hasMore: true // 是否还有更多数据
			}
		},
		methods: {
			// goBack(){
			// 	let pages = getCurrentPages();
			// 	let prevPage = pages[pages.length - 2];
			// 	prevPage.$vm.loadGroupNotice(this.groupId);
			// 	uni.navigateBack()
			// },
			loadGroupInfo() {
				this.$http({
					url: `/group/find/${this.groupId}`,
					method: 'GET'
				}).then((group) => {
					this.group = group;

				});
			},
			async loadGroupMembers() {
				await this.$http({
					url: `/group/members/${this.groupId}`,
					method: "GET"
				}).then((members) => {
					this.groupMembers = members.filter(m => !m.quit);
				})
			},
			goDetail(item) {
				this.$http({
					url: `/group/readGroupNotice?noticeId=${item.id}`,
					method: "POST",
				}).then(() => {

				})

				uni.navigateTo({
					url: "/pageSubOne/group/group-announce-detail?id=" + item.id
				})
			},
			goAdd() {
				uni.navigateTo({
					url: `/pageSubOne/group/group-announce-add?id=${this.groupId}`
				})
			},
			async handleData() {
				this.pageNum=1
				this.loading=false
				this.tList=[]
				this.aList=[]
				await this.getData()
			},
			getData() {
				if (this.loading) return;
				this.loading = true;
				let data = {
					groupId: this.groupId,
				}
				this.$http({
					url: `/group/findGroupNotice?pageNum=${this.pageNum}&pageSize=${this.pageSize}`,
					method: 'POST',
					data: data
				}).then((notice) => {
					if (notice) {
						let topNotice = [];
						let otherNotices = [];
						if (notice.records) {
							notice.records.forEach(record => {
								const date = new Date(record.updateTime);
								const formattedDate =
									`${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`;
								record.updateTime = formattedDate

								if (record.isOnTop) {
									topNotice.push(record);
								} else {
									otherNotices.push(record);
								}
							});

							if (topNotice) {
								this.tList = this.tList.concat(topNotice)
							}
							this.aList = this.aList.concat(otherNotices);
							this.pageNum++;
						} else {
							this.hasMore = false;
						}
						this.loading = false;
					}
				})
			}
		},
		computed: {
			isOwner() {
				return this.userStore.userInfo.id == this.group.ownerId
			},
			isAdmin() {
				if (this.group.groupAdmin) {
					return this.group.groupAdmin.includes(this.userStore.userInfo.id)
				} else {
					return false
				}
			}
		},
		onShow() {
			// this.tList = [];
			this.pageNum=1
			this.getData()

		},
		onReachBottom() {
			if (this.hasMore && !this.loading) {
				this.getData();
			}
			if (this.hasMore && this.tList.length>0 && this.aList.length>0) {
				uni.showToast({
					title: '没有更多数据了',
					icon: 'none'
				});
				return
			}
		},
		onLoad(options) {
			this.groupId = options.id;
			// 查询群聊信息
			this.loadGroupInfo(options.id);
			this.getData()
		},
		onUnload() {
			let pages = getCurrentPages();
			let prevPage = pages[pages.length - 2];
			prevPage.$vm.loadGroupNotice(this.groupId);
		}
	}
</script>

<style lang="scss" scoped>
	.today {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16rpx 32rpx;

		.title {
			color: $brand-500;
			font-size: 30rpx;
		}

		.btncolor {
			background-color: $brand-500;
			color: $white;
			padding: 8rpx 24rpx;
			border-radius: 34rpx;
			text-align: center;
			line-height: 36rpx;
			vertical-align: middle;
		}
	}

	.announce {
		width: 100%;
		text-align: center;

		.none {
			width: 100vw;
			height: 70vh;
			display: flex;
			justify-content: center;
			align-items: center;
			font-weight: 600;
			font-size: 40rpx;
		}

		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 30rpx;
			padding: 24rpx 32rpx;
			position: relative;

			.fc {
				display: flex;
				align-items: center;
				vertical-align: middle;
				gap: 8rpx;
			}

			.header-button {
				position: absolute;
				left: 30rpx;
				top: 30rpx;
				width: 95rpx;
				height: 35rpx;
				line-height: 35rpx;
				font-size: 20rpx;
				text-align: center;
				background-color: #0873ff;
			}
		}

		.people {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx;

			.yidu {
				display: flex;
				align-items: center;
				color: #0c9eff;
			}
		}

		.content {
			padding: 0 32rpx;
			text-align: left;
			color: $gray-600;
		}

		.fc {
			display: flex;
			align-items: center;
		}

		.uptime {
			display: flex;
			padding: 24rpx 32rpx 0 32rpx;
			color: $gray-400;
		}

		.badge {
			display: flex;
			align-items: center;
			padding: 24rpx 32rpx;
			gap: 8rpx;

			.top {
				color: $brand-500;
				border: 1rpx solid $brand-200;
				padding: 4rpx 12rpx;
				border-radius: 18rpx;
				font-size: 20rpx;
				line-height: 28rpx;
				font-weight: 500;
			}

			.fix,
			.dia {
				color: $success-500;
				border: 1rpx solid $success-200;
				padding: 4rpx 12rpx;
				border-radius: 18rpx;
				font-size: 20rpx;
				line-height: 28rpx;
				font-weight: 500;
			}
		}
	}
</style>